
{% extends 'base_main.html' %}

{% block title%}
    爱家
{% endblock %}

{% block content %}
    <div class="container">
            <div class="top-bar">
                <img class="logo fl" src="/static/images/logo@128x59.png">
                <div class="user-info fr">
                    <span><i class="fa fa-user fa-lg"></i></span> <a class="user-name" href="{{ url_for('user.my') }}"><span id="mine"></span></a>
                </div>
                <div class="register-login fr">
                    <a class="btn top-btn btn-theme" href="{{ url_for('user.register') }}">注册</a>
                    <a class="btn top-btn btn-theme" href="{{ url_for('user.login') }}">登录</a>
                </div>
            </div>
            <div class="swiper-container">
                <div class="swiper-wrapper">
                </div>
                <div class="swiper-pagination"></div>
            </div>
            <div class="search-bar">
                <button class="filter-btn" type="button" data-toggle="modal" data-target="#area-modal"><span class="fl" id="area-btn">选择城区</span><span class="fr"><i class="fa fa-map-marker fa-lg fa-fw"></i></span></button>
                <button class="filter-btn" type="button" data-toggle="modal" data-target="#start-date-modal"><span class="fl" id="start-date-btn">入住日期</span><span class="fr"><i class="fa fa-calendar fa-lg fa-fw"></i></span></button>
                <button class="filter-btn end-date" type="button" data-toggle="modal" data-target="#end-date-modal"><span class="fl" id="end-date-btn">离开日期</span><span class="fr"><i class="fa fa-calendar fa-lg fa-fw"></i></span></button>
                <a class="btn search-btn btn-theme" onclick="goToSearchPage(this);" area-id="" start-date="" end-date="">搜索</a>
                <div class="modal fade" id="area-modal" tabindex="-1" role="dialog" aria-labelledby="area-label">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="area-label">选择城区</h4>
                            </div>
                            <div class="modal-body">
                                <div class="area-list">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal fade" id="start-date-modal" tabindex="-1" role="dialog" aria-labelledby="start-date-label">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="start-date-label">入住日期</h4>
                            </div>
                            <div class="modal-body">
                                <div class="date-select" id="start-date"></div>
                                <input type="hidden" id="start-date-input">
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-theme" onclick="setStartDate();">确定</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal fade" id="end-date-modal" tabindex="-1" role="dialog" aria-labelledby="end-date-label">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="end-date-label">离开日期</h4>
                            </div>
                            <div class="modal-body">
                                <div class="date-select" id="end-date"></div>
                                <input type="hidden" id="end-date-input">
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-theme" onclick="setEndDate();">确定</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="footer">
                <p><span><i class="fa fa-copyright"></i></span>爱家租房&nbsp;&nbsp;享受家的温馨</p>
            </div>
        </div>
{% endblock %}
